﻿<script src="../source/LexicalParser.js"></script>
<script src="../source/SyntacticalParser.js"></script>
<script src="../source/Parser.js"></script>
<style>
.Keyword, .NullLiteral, .BooleanLiteral {
    color:blue;
}
.StringLiteral {
    color:red;
}
.RegularExpressionLiteral {
    color:red;
}
.NumericLiteral {
    color:purple;
}
#output {
    white-space:pre-wrap;
}
</style>

<pre id="output"></pre>
<textarea id="code" style="width:100%;height:500px;">var bubbleSort = function (array) {
    for (var x = 0; x < array.length; x++) {
        for (var y = 0; y < array.length - x; y++) {
            if (array[y] > array[y + 1]) {
                swap(array, y, y + 1);
            }
        }
    }
}</textarea>
<button >parse</button>
<script>

function getClassName(token) {
    var classNames = ["InputElement","Comments","SingleLineComments","MultiLineComments","WhiteSpace","Token","IdentifierName","Identifier","Keyword","NullLiteral","BooleanLiteral","Punctuator","NumericLiteral","StringLiteral","RegularExpressionLiteral","LineTerminator"];
    return classNames.filter(function(e){ return token.hasOwnProperty(e); }).join(" ");
}

document.querySelector("button").onclick = function(){
    var parser = new Parser();

    var str = "";
    var output = document.querySelector("#output");
    output.innerHTML = "";


    var tree = parser.parse(document.querySelector("#code").value,function(token){
            var tokenSpan = document.createElement("span");
            tokenSpan.className = getClassName(token);
            tokenSpan.appendChild(document.createTextNode(token));
            output.appendChild(tokenSpan);
    });
};
</script>